<template>
  <view>
    <!-- 状态栏 -->
    <view class="status" :style="{ position: headerPosition }"></view>
    <view class="header" :style="{ position: headerPosition }">
      <view class="title">商品分类</view>
    </view>
    <!-- 占位 -->
    <view class="place"></view>
    <view class="category-list" v-if="categoryList.length > 0">
      <!-- 左侧分类导航 -->
      <scroll-view scroll-y="true" class="left">
        <view
          class="row"
          v-for="(category, index) in categoryList"
          :key="category.id"
          :class="[index == showCategoryIndex ? 'on' : '']"
          @tap="showCategory(index)"
        >
          <view class="text">
            <view class="block"></view>
            {{ category.name }}
          </view>
        </view>
      </scroll-view>
      <!-- 右侧子导航 -->
      <scroll-view scroll-y="true" class="right">
        <view
          class="category"
          v-for="(category, index) in categoryList"
          :key="category.id"
          v-show="index == showCategoryIndex"
        >
          <view class="list" v-if="category.list.length > 0">
            <view
              class="box"
              v-for="(box, i) in category.list"
              :key="i"
              @tap="toGood(box)"
            >
              <image
                :src="box.pImgUrl ? box.pImgUrl : '/static/img/category/3.png'"
              ></image>
              <view class="text">{{ box.pName }}</view>
            </view>
          </view>
          <view v-else> 此分类暂无商品 </view>
        </view>
      </scroll-view>
    </view>
    <view v-else style="text-align: center"> 暂无数据 </view>
  </view>
</template>
<script>
import { getProductList, getCategaryList } from "@/common/api/product.js";
import { BASE_URL } from "@/common/utils/request.js";
export default {
  data() {
    return {
      showCategoryIndex: 0,
      headerPosition: "fixed",
      city: "北京",
      //分类列表
      categoryList: [],
      BASE_URL: BASE_URL,
    };
  },
  onPageScroll(e) {
    //兼容iOS端下拉时顶部漂移
    if (e.scrollTop >= 0) {
      this.headerPosition = "fixed";
    } else {
      this.headerPosition = "absolute";
    }
  },
  onLoad() {
    this.getProductListFun();
  },
  methods: {
    // 获取分类列表
    getCategaryListFun() {
      const params = {
        pageSize: 10000,
      };
      return new Promise((resolve) => {
        getCategaryList(params).then((res) => {
          resolve(res);
        });
      });
    },
    async getProductListFun() {
      this.categoryList = [];
      uni.showLoading({ title: "加载中..." });
      const temcategaryList = (await this.getCategaryListFun()).data.list || [];
      const params = {
        pageSize: 9999,
      };
      getProductList(params).then((res) => {
        uni.hideLoading();
        if (res.data.ok) {
          const temProdectList = res.data.list || [];
          if (temcategaryList.length > 0 && temProdectList.length > 0) {
            temcategaryList.map((item) => {
              const obj = item;
              obj.list = [];
              temProdectList.forEach((element) => {
                if (element.categoryId == item.id) {
                  if (element.pImgUrl) {
                    element.pImgUrl = `${BASE_URL}${
                      element.pImgUrl.split(",")[0]
                    }`;
                  }

                  obj.list.push(element);
                }
              });
            });
            this.categoryList = temcategaryList;
          } else {
            this.categoryList = [];
          }
          const temObj = {
            id: "self_do",
            name: "定制商品",
            description: "",
            list: [
              {
                categoryId: "self_do",
                categoryName: "定制商品",
                pIntroduce: "--",
                pName: "定制商品",
                pNumber: "--",
                pSpecifications: "--",
                pPrice: "--",
                pImgUrl: "/static/img/self.png", //定制商品的图片
              },
            ],
          };
          this.categoryList.push(temObj);
        }
      });
    },
    //分类切换显示
    showCategory(index) {
      this.showCategoryIndex = index;
    },
    toGood(e) {
      if (e.categoryId == "self_do") {
        uni.navigateTo({
          url: "../../goods/self-good",
        });
      } else {
        uni.navigateTo({
          url: "../../goods/goods?id=" + e.id,
        });
      }
    },
    //搜索跳转
    toSearch() {
      // uni.showToast({title: "建议跳转到新页面做搜索功能"});
    },
  },
};
</script>
<style lang="scss">
.status {
  width: 100%;
  height: 0;
  position: fixed;
  z-index: 10;
  background-color: #fff;
  top: 0;
  /*  #ifdef  APP-PLUS  */
  height: var(--status-bar-height); //覆盖样式
  /*  #endif  */
}

.header {
  width: 92%;
  padding: 0 4%;
  height: 100upx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: #fff;
  /*  #ifdef  APP-PLUS  */
  top: var(--status-bar-height);
  /*  #endif  */
  .title {
    font-size: 36upx;
  }
  .addr {
    width: 120upx;
    height: 60upx;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-size: 28upx;
    .icon {
      height: 60upx;
      margin-right: 5upx;
      display: flex;
      align-items: center;
      font-size: 42upx;
      color: #ffc50a;
    }
  }
  .input-box {
    width: 100%;
    height: 60upx;
    background-color: #f5f5f5;
    border-radius: 30upx;
    position: relative;
    display: flex;
    align-items: center;
    .icon {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      right: 0;
      width: 60upx;
      height: 60upx;
      font-size: 34upx;
      color: #c0c0c0;
    }
    input {
      padding-left: 28upx;
      height: 28upx;
      font-size: 28upx;
    }
  }
  .icon-btn {
    width: 60upx;
    height: 60upx;
    flex-shrink: 0;
    display: flex;
    .icon {
      width: 60upx;
      height: 60upx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 42upx;
    }
  }
}
.place {
  background-color: #ffffff;
  height: 100upx;
  /*  #ifdef  APP-PLUS  */
  margin-top: var(--status-bar-height);
  /*  #endif  */
}
.category-list {
  width: 100%;
  background-color: #fff;
  display: flex;
  .left,
  .right {
    position: absolute;

    top: 100upx;
    /*  #ifdef  APP-PLUS  */
    top: calc(100upx + var(--status-bar-height));
    /*  #endif  */
    bottom: 0upx;
  }
  .left {
    width: 24%;
    left: 0upx;
    background-color: #f2f2f2;
    .row {
      width: 100%;
      height: 90upx;
      display: flex;
      align-items: center;
      .text {
        width: 100%;
        position: relative;
        font-size: 28upx;
        display: flex;
        justify-content: center;
        color: #3c3c3c;
        .block {
          position: absolute;
          width: 0upx;
          left: 0;
        }
      }
      &.on {
        height: 100upx;
        background-color: #fff;
        .text {
          font-size: 30upx;
          font-weight: 600;
          color: #2d2d2d;
          .block {
            width: 10upx;
            height: 80%;
            top: 10%;
            background-color: #f06c7a;
          }
        }
      }
    }
  }
  .right {
    width: 76%;
    left: 24%;
    .category {
      width: 94%;
      padding: 20upx 3%;
      .banner {
        width: 100%;
        height: 24.262vw;
        border-radius: 10upx;
        overflow: hidden;
        box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3);
        image {
          width: 100%;
          height: 24.262vw;
        }
      }
      .list {
        margin-top: 40upx;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .box {
          width: calc(71.44vw / 3);
          margin-bottom: 30upx;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          image {
            width: 60%;
            height: calc(71.44vw / 3 * 0.6);
          }
          .text {
            margin-top: 5upx;
            width: 100%;
            display: flex;
            justify-content: center;
            font-size: 26upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
